<template>
	<view class="body box-c">
		<view class="" :style="{height: height+'px'}">
			<scroll-view scroll-y="true" style="height: 100%;">
				<view class="product-v mt-2">
					<view class="box title mt-2 d-ai-c" @tap='openShop'>
						<view class="flex-1 box d-jc-c">
							<image :src="orderInfo.shopLogo" mode=""></image>
						</view>
						<view class="box-c flex-3 d-jc-c title-time">
							<text>
								{{orderInfo.shopName}}
							</text>
							<text>
								{{orderInfo.createTime}}
							</text>
						</view>
						<view class="flex-1 box d-jc-end">
							<text class="iconfont iconqianjin"></text>
						</view>
					</view>
					<view class="line">

					</view>
					<view class="" :key=index v-for="(item,index) in orderInfo.goodSkuDto" >
						<view class="box product-info" :class="item.verificationStatus==0?'':'text-bias'">
							<text  class="flex-2">
								{{item.goodsName}}
							</text>
							<text  class="flex-1">x{{item.number}}</text>
							<text class="flex-1">{{item.goodsPrice}}积分</text>
							
						</view>
							
					</view>
					<view class="refond box d-jc-end mt-1">
						<text v-if="orderInfo.orderStatus==2" @tap='deleteOrder()'>删除订单</text>
						<text class="mt-2" v-if="orderInfo.orderStatus==1" @tap='refund()'>申请退款</text>
					</view>
					<view class="line-dashes"></view>
					<view class="" v-if="orderInfo.orderStatus==1">
						<view class="order-no box d-jc-sb d-ai-c">
							<text class="flex-1">核销券码</text>
							<text class="flex-2">{{orderInfo.orderNumber}}</text>
						</view>
						<view class="QrCode box d-jc-c d-ai-c my-2">
							<canvas canvas-id="qrcode" style="width: 200px;height: 200px;" />
						</view>
					</view>
				</view>
				<view class="order-info">
					<view class="">
						订单信息
					</view>
					<view class="line">

					</view>
					<view class="box d-jc-sb">
						<text>订单编号</text>
						<text>{{orderInfo.orderNumber}}</text>
					</view>
					<view class="box d-jc-sb">
						<text>下单时间</text>
						<text>{{orderInfo.createTime}}</text>
					</view>

				</view>
				<view class="bg-box3 p-2 refund" v-show="orderInfo.orderStatus==-3 ||orderInfo.orderStatus==-4||orderInfo.orderStatus==-5">
							<view class="refund-title box d-jc-sb">
								<view class="">退款详情</view>
								<view class="" v-if="orderInfo.orderStatus==-3 ">正在退款</view>
								<view class="" v-if="orderInfo.orderStatus==-4 ">已退款</view>
								<view class="" v-if="orderInfo.orderStatus==-5 ">退款失败</view>
								
							</view>
							<view class="box mt-1">
								<text>
									申请时间
								</text>
								<text>
									{{refundInfoData.createTime}}
								</text>
							</view>
							<view class="box mt-1">
								<text>
									退款类型
								</text>
								<text>
								{{refundInfoData.typeName}}
								</text>
							</view>
							<view class="box mt-1">
								<text>
									退款原因
								</text>
								<text>
									{{refundInfoData.causeName}}
								</text>
							</view>
							<view class="box reason mt-1">
								<text>
									退款理由
								</text>
								<text>
									{{refundInfoData.refundRemark}}
								</text>
							</view>
							<view class="box refund-image mt-2">
								<text>
									退款图片
								</text>
								<view class="">
									<image @tap='previewImg(index)' v-for="(item,index) in refundInfoData.refundImages" class="mr-2" :src="item" mode="aspectFill"></image>
									
								</view>
							</view>
							
						</view>
			</scroll-view>

		</view>
		<view class="bottom box d-ai-c">
			<view class="flex-6 address">
				<view class="">{{orderInfo.shopName}}</view>
				<view class="">{{orderInfo.address}}</view>
			</view>
			<view class="line-y-v flex-1 box d-jc-c">
				<view class="line-y">

				</view>
			</view>
			<view class="box d-jc-sb flex-3">
				<view class="icon-common" @tap="toMapAPP(orderInfo.latitude,orderInfo.longitude,orderInfo.address)">
					<view class="iconfont icondaohang">
					</view>
					<view class="">
						导航去
					</view>
				</view>
				<view class="icon-common" @tap='callPhone'>

					<view class="iconfont icondianhua">

					</view>
					<view class="">
						联系TA
					</view>
				</view>
			</view>

		</view>

	</view>
</template>

<script>
	import uQRCode from '@/js_sdk/Sansnn-uQRCode/uqrcode.js'
	export default {
		data() {
			return {
				height: 0,
				orderInfo: '',
				refundInfoData:{},
				orderNumber:''
			}
		},
		onReady() {
			let _this = this;
			uni.getSystemInfo({ //调用uni-app接口获取屏幕高度
				success(res) { //成功回调函数
					console.log(JSON.stringify(res))
					_this.height = res.windowHeight - uni.upx2px(150)
					console.log(_this.height)
				}
			})

		},
		onLoad(parameter) {
			this.orderNumber=parameter.orderNumber
			this.getOrdersInfo(parameter.orderNumber)
			this.refundInfo(parameter.orderNumber)

		},
		onShow() {
			this.getOrdersInfo(this.orderNumber)
			this.refundInfo(this.orderNumber)
		},
		methods: {
			/* 
			
			 */
			openShop(){
				uni.navigateTo({
					url: '/pages/shopList/product?shopId=' + this.orderInfo.shopId,
					animationType: 'pop-in',
					animationDuration: 200
				}) 
			},
			previewImg(index) {
				let _this = this;
				// #ifdef MP
				uni.previewImage({
					current: index - 1,
					urls: _this.refundInfoData.refundImages,
					indicator: 'number',
					loop: true
				});
				// #endif
			
				// #ifndef MP
				uni.previewImage({
					current: index - 1,
					urls: _this.refundInfoData.refundImages,
					indicator: 'number',
					loop: true
				});
				// #endif
			
			},
			refundInfo(orderNumber){
				let parameter = {
					orderNumber:orderNumber
				}
				this.$api.refundInfo(parameter).then(res =>{
					this.refundInfoData = res.data.dataMap
				})
			},
			refund(){
				uni.navigateTo({
					url:'order-refund?orderNumber='+this.orderInfo.orderNumber
				})
			},
			deleteOrder() {
				this.$api.deleteOrder({
					orderNumber: this.orderInfo.orderNumber
				}).then((res) => {
					if (res.data.success) {
						uni.showToast({
							title: "成功",
							duration: 1000,
						});
						uni.$emit("carData", 1)
						setTimeout(function() {
							uni.navigateBack({
								delta: 1
							});
						}, 1100);
			
					} else {
						uni.showToast({
							title: "订单删除失败",
							duration: 1000,
							icon: 'none',
						});
					}
				})
			},

			openMap() {
				this.toMapAPP('31.341849', '120.634715', '梅巷社区')
			},
			toMapAPP(latitude, longitude, name) {
				let url = "";
				if (plus.os.name == "Android") { //判断是安卓端
					plus.nativeUI.actionSheet({ //选择菜单
						title: "选择地图应用",
						cancel: "取消",
						buttons: [{
							title: "腾讯地图"
						}, {
							title: "百度地图"
						}, {
							title: "高德地图"
						}]
					}, function(e) {
						switch (e.index) {
							//下面是拼接url,不同系统以及不同地图都有不同的拼接字段
							case 1:
								//注意referer=xxx的xxx替换成你在腾讯地图开发平台申请的key
								url =
									`qqmap://map/geocoder?tocoord=${latitude},${longitude}&to=${name}&referer=J5UBZ-MENKK-6ABJ7-AJ4RR-XNHP7-KBBYA`;
								break;
							case 2:
								url =
									`baidumap://map/marker?location=${latitude},${longitude}&title=${name}&coord_type=gcj02&src=andr.baidu.openAPIdemo`;
								break;
							case 3:
								url =
									`androidamap://viewMap?sourceApplication=appname&poiname=${name}&lat=${latitude}&lon=${longitude}&dev=0`;
								break;
							default:
								break;
						}
						if (url != "") {
							url = encodeURI(url);
							//plus.runtime.openURL(url,function(e){})调起手机APP应用
							plus.runtime.openURL(url, function(e) {
								plus.nativeUI.alert("本机未安装指定的地图应用");
							});
						}
					})
				} else {
					// iOS上获取本机是否安装了百度高德地图，需要在manifest里配置
					// 在manifest.json文件app-plus->distribute->apple->urlschemewhitelist节点下添加
					//（如urlschemewhitelist:["iosamap","baidumap"]）  
					plus.nativeUI.actionSheet({
						title: "选择地图应用",
						cancel: "取消",
						buttons: [{
							title: "苹果地图"
						}, {
							title: "腾讯地图"
						}, {
							title: "百度地图"
						}, {
							title: "高德地图"
						}]
					}, function(e) {
						switch (e.index) {
							case 1:
								url = `https://maps.apple.com/?ll=${latitude},${longitude}&q=${name}`
								break;
							case 2:
								url =
									`qqmap://map/geocoder?coord=${latitude},${longitude}&referer=J5UBZ-MENKK-6ABJ7-AJ4RR-XNHP7-KBBYA`;
								break;
							case 3:
								url =
									`baidumap://map/marker?location=${latitude},${longitude}&title=${name}&content=${name}&src=ios.baidu.openAPIdemo&coord_type=gcj02`;
								break;
							case 4:
								url =
									`iosamap://viewMap?sourceApplication=applicationName&poiname=${name}&lat=${latitude}&lon=${longitude}&dev=0`;
								break;
							default:
								break;
						}
						if (url != "") {
							url = encodeURI(url);
							plus.runtime.openURL(url, function(e) {
								plus.nativeUI.alert("本机未安装指定的地图应用");
							});
						}
					})
				}
			},
			callPhone() {
				uni.makePhoneCall({
					phoneNumber: this.orderInfo.phone //仅为示例
				});
			},

			async make() {
				// 回调方式
				uQRCode.make({
					canvasId: 'qrcode',
					componentInstance: this,
					text: this.orderInfo.orderNumber,
					size: 200,
					margin: 0,
					backgroundColor: '#ffffff',
					foregroundColor: '#000000',
					fileType: 'jpg',
					correctLevel: uQRCode.errorCorrectLevel.H,
					success: res => {
						console.log(res)
					}
				})
			},
			getOrdersInfo(orderNumber) {
				this.$api.getOrdersInfo({
					orderNumber: orderNumber
				}).then((res) => {
					if (res.data.success) {
						this.orderInfo = res.data.dataMap
						if(this.orderInfo.orderStatus==1){
							this.make()
						}

					} else {

					}

				})
			}

		}
	}
</script>

<style scoped lang="less" scoped>
	.bg-box3 {
		width: 650rpx;
		background-color: #fff;
		min-height: 200rpx;
		margin: 0 auto;
		border-radius: 12rpx;
		margin-top: 30rpx;
		box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.05);
		margin-bottom: 50rpx;
		.refund-image{
			view{
				width: 520rpx;
				min-height: 100rpx;
				background-color: #fff;
				border-radius: 5rpx;
				image{
					width: 150rpx;
					height: 150rpx;
					border-radius: 10rpx;
				}
			}
			
		}
		.reason{
			text:nth-child(2){
				width: 480rpx;
				min-height: 100rpx;
				background-color: #F8F8F8;
				border-radius: 10rpx;
				padding: 10rpx;
			}
		}
		
		.refund-title{
			view:nth-child(1){
				font-weight: bold;
			}
			view:nth-child(2){
				color: #FF5551;
			}
		}
	
	}
	
	.refund{
		view{
			text:nth-child(1){
				width: 130rpx;
				color: #999;
			}
			
		}
		
		
	}
	
	.refond{
		text{
			border-radius: 50rpx;
			padding: 0px 10px;
			color: #444;
			font-size: 22rpx;
			border: 2rpx solid #999;
		}
	}
	.line-dashes {
		border-bottom: 1rpx dashed #999;
		margin: 30rpx 0;
	}

	.bottom {
		bottom: 0rpx;
		position: fixed;
		width: 690rpx;
		padding: 0 32rpx;
		height: 150rpx;
		background-color: #fff;

		.address {
			view:first-child {
				font-weight: bold;
			}

			view:last-child {
				color: #888888;
			}
		}

		.icon-common {

			.icondianhua,
			.icondaohang {
				color: #fff;
				text-align: center;
				line-height: 50rpx;
				margin: 0 auto;
				width: 50rpx;
				height: 50rpx;
				border-radius: 50rpx;
			}

			.icondianhua {
				background-color: #FF5551;
			}

			.icondianhua+view {
				color: #FF5551;
			}

			.icondaohang {
				font-size: 36rpx;
				background-color: #FF7E51;
			}

			.icondaohang+view {
				color: #FF7E51;
			}
		}


		.line-y-v {
			width: 20rpx;
		}

		.line-y {
			height: 100rpx;
			width: 2rpx;
			background-color: #CCCCCC;
		}
	}

	/* 订单信息 */
	.order-info {
		margin: 10rpx auto;
		background-color: #fff;
		border-radius: 10rpx;
		width: 640rpx;
		padding: 20rpx 30rpx;

		.line {
			height: 2rpx;
			background-color: #cecece;
			margin: 10rpx 0;
		}

		view:first-child {
			font-weight: bold;
		}

		view:nth-child(3),
		view:nth-child(4) {
			text:first-child {
				color: #999999;
			}

			text:last-child {
				color: #666666;
			}
		}
	}

	/* 商品信息 */
	.product-v {
		margin: 20rpx auto;
		width: 640rpx;
		background-color: #fff;
		border-radius: 10rpx;
		padding: 10rpx 30rpx;

		.product-info {
			text:nth-child(2) {
				color: #888888;
			}

			text:nth-child(3) {
				color: #222222;
				text-align: end;
			}
		}

		.title-time {
			text:first-child {
				font-weight: bold;
			}

			text:last-child {
				color: #888888;

			}
		}

		.iconqianjin {
			color: #888888;
		}

		.QrCode {
			&>image {
				width: 300rpx;
				height: 300rpx;
				border: 1rpx solid #eaeaea;
				border-radius: 15rpx;

			}
		}

		.order-no {
			margin: 0 auto;
			width: 500rpx;
			height: 78rpx;
			background-color: #F8F8F8;
			border-radius: 10rpx;
			text-align: center;

			text:first-child {
				color: #999999;
			}
		}

		.line {
			height: 2rpx;
			background-color: #cecece;
			margin: 20rpx 0;
		}

		.title {
			image {
				width: 100rpx;
				height: 100rpx;
				border-radius: 15rpx;
				border: solid 1rpx #dfdfdf;
			}
		}
	}

	.body {
		background-color: #F8F8F8;
		height: 100%;
	}

	.a {
		width: 200rpx;
		height: 200rpx;
		background-color: #0077AA;
		background: radial-gradient(circle at top left, transparent 10px, #2baaca 0) top left,
			radial-gradient(circle at top right, transparent 10px, #2baaca 0) top right,
			radial-gradient(circle at bottom right, transparent 10px, #2baaca 0) bottom right,
			radial-gradient(circle at bottom left, transparent 10px, #2baaca 0) bottom left;
		background-size: 50% 50%;
		background-repeat: no-repeat;
	}
</style>
